<template>
	<view class="application">
		<view class="wrapper" v-if="showWrapper">
			<view class="application_content">
				<view class="application_header">
					<view class="application_lt">
						<view class="name">
							<text>{{memberData.idCardName?memberData.idCardName:''}}</text>
							<text class="sex">({{memberData.gender?memberData.gender:''}}</text>
							<text class="type_name">{{memberData.type_name?memberData.type_name:""}})</text>
						</view>
						<view class="status">
							<uni-tag
								:text="memberData.status['text']" 
								size="small" 
								:inverted="true" 
								:circle="true"
								:type="memberData.status['value']">
							</uni-tag>
							</uni-tag>
						</view>
					</view>
					<view class="application_rt">
						<!-- <image src="../../static/default-avatar.png" mode=""></image> -->
					</view>
				</view>
				<view class="application_mid">
					<view class="cell">
						<view class="">
							证件号
						</view>
						<view class="cell_rt">
							{{memberData.idCard?memberData.idCard:"暂无"}}
						</view>
					</view>
					<view class="cell">
						<view class="">
							注册时间
						</view>
						<view class="cell_rt">
							{{memberData.create_time}}
						</view>
					</view>
					<view class="cell">
						<view class="">
							到期时间
						</view>
						<view class="cell_rt">
							{{memberData.end_time}}
						</view>
					</view>
				</view>
			</view>
			
			<view class="application_content">
				<view class="application_mid">
				<view class="org_title">
					申请方信息
				</view>
				<view class="cell">
					<view class="">
						机构名
					</view>
					<view class="">
						{{memberData.org_name?memberData.org_name:"暂无"}}
					</view>
				</view>
				<view class="cell">
					<view class="">
						联系人
					</view>
					<view class="">
						{{memberData.link_name?memberData.link_name:"暂无"}}
					</view>
				</view>
				<view class="cell">
					<view class="">
						联系电话
					</view>
					<view class="">
						{{memberData.link_phone?memberData.link_phone:"暂无"}}
					</view>
				</view>
				</view>
			</view>
			
			<view class="application_reason" v-if="noReason==false">
				<view class="title">
					申请理由
				</view>
				<view class="textreason">
					{{memberData.reason}}
				</view>
			</view>
			
			<view class="application_no" v-if='noReason'>
				<view class="title">
					申请理由
				</view>
				<view class="cell_rt">
					无
				</view>
			</view>
			
			<view class="application_reason" v-if='isnoAgreeReason'>
				<view class="title">
					拒绝理由
				</view>
				<view class="textreason">
					{{memberData.noAgreeReason}}
				</view>
			</view>
			
			<view class="application_pic" v-if="no_pic==false">
				<view class="title">
					图片说明
				</view>
				<view class="img_list">
					<view class="img" v-for="(item,index) in memberData.img_files" :key="index">
						<image :src="item" mode="aspectFill"  @tap.stop="preImg(item)"></image>
					</view>
					<!-- <image src="//test-g.yunbisai.com/img/cert/pic_wrong.jpg" v-if="arr_showPic[index]==false"></image> -->
				</view>
			</view>
			
			<view class="application_no" v-if='no_pic'>
					<view class="title">
						图片说明
					</view>
					<view class="cell_rt">
						无
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import uniTag from "@/components/uni-tag/uni-tag.vue";
	import {findMember,rankExtent} from "@/common/api.js";
	import uParse from '@/components/uni-parse/parse.vue'
	export default{
		data(){
			return{
				txtBook_no:"",
				memberData:{},
				rank_arr:[],
				guid:"",
				no_pic:false,
				noReason:false,
				showWrapper:false,
				isTransferIn:false,  //是否为会员转入还是转出
				noAgreeReason:'',  //拒绝理由
				isnoAgreeReason:false,
				arr_showPic:[]
			}
		},
		components:{
			uniTag,
			uParse
		},
		onLoad(e) {
			var _this=this;
			_this.txtBook_no=e.idcard;
			_this.guid=e.guid;
			_this.getRankExtent();
			uni.showLoading({
				title:"加载中..."
			})
			setTimeout(function(){
				uni.hideLoading()
				_this.showWrapper=true;
			},1000)
			// this.$refs.upimg.upload_max = 5;
		},
		methods:{
			//获取级别范围
			getRankExtent() {
				var _this = this;
				//测试
					// _this.rankSet.itemObject.step_1.push({type_name:'1级'},{type_name:"2级"})
					// _this.rankSet.itemObject.step_2.push([{type_name:'2级'},{type_name:"1级"}],[{type_name:'3级'},{type_name:"4级"}])
					
				rankExtent().then(function(res) {
					var e = res.data;
					if (e.errcode == 0) {
						if (e.data.length > 0) {
							_this.rank_arr=e.data;
							_this.searchMember();
						}
					}
				})
			},
			searchMember(){
				var _this=this,data={};
				_this.noSearch=true;
				_this.nodata=false;
				data={
					idcard:_this.txtBook_no,
					guid:_this.guid
				}
				findMember(data).then(function(res){
					// console.log(res)
					var e=res.data;
					if(e.errcode==0){
						if(e.data!=null){
							_this.noSearch=false;
							e.data.gender=e.data.sex=="0"?"男":"女";
							e.data.create_time=e.data.fees_start!=null?e.data.fees_start.slice(0,4)+"年"+e.data.fees_start.slice(5,7)+"月"+e.data.fees_start.slice(8,10)+'日':"暂无",
							e.data.end_time=e.data.fees_end!=null?e.data.fees_end.slice(0,4)+"年"+e.data.fees_end.slice(5,7)+"月"+e.data.fees_end.slice(8,10)+'日':"暂无"
							e.data.status=_this.checkState(e.data.transfer_state)
							_this.rank_arr.map(function(item,index){
								if(e.data.level==item.eventType_id){
									e.data.type_name=item.type_name
								}
							})
								if(e.data.transfer_in_files!=null){
									var img_list=[],img_arr=[];
									img_list=e.data.transfer_in_files.split(",")
									img_list.map(function(item,index){
										item="https:"+_this.$store.state.baseImgURL+item;
										img_arr.push(item)
									})
									e.data.img_files=img_arr;
									_this.no_pic=false;
								}else{
									_this.no_pic=true;
								}
								_this.noReason=(e.data.transfer_in_reason==null||e.data.transfer_in_reason=="")?true:false;
								_this.isnoAgreeReason=(e.data.transfer_out_reason==null||e.data.transfer_out_reason=="")?false:true;
								e.data.reason=`${e.data.transfer_in_reason}`;
								e.data.noAgreeReason=`${e.data.transfer_out_reason}`;
							_this.memberData=e.data;
						}else{
							_this.nodata=true;
						}
					}else if(e.errcode==1000||e.errcode==1001){
						uni.removeStorageSync('token');
						uni.reLaunch({
							url:'/pages/home/welcome'
						})
					}else{
						uni.showToast({
							position: 'center',
							icon: 'none',
							title:e.msg
						});
					}
				})
			},
			checkState(state){
				if(state==1){
					return {text:"待处理",value:"warning"}
				}else if(state==2){
					return {text:"正常",value:"success"}
				}else if(state==4){
					return {text:"过期",value:"warning"}
				}
			},
			//预览
			preImg(imgSrc){
				var _this=this;
				uni.previewImage({
					current:"https:"+imgSrc,
					urls:_this.memberData.img_files
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	.application{
		overflow-y: auto;
	}
	.application_content{
		margin: 24rpx;
		padding: 28rpx 44rpx;
		background: #fff;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid #F1F1F2;
		.application_header{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 100%;
			border-bottom: 2rpx dashed #DBDBDB;
			padding-bottom: 28rpx;
		}
		.application_lt{
			display: flex;
			flex-direction: row;
			align-items: center;
			.name{
				display: flex;
				flex-direction: row;
			}
			.sex{
				padding-left: 20rpx;
			}
			.type_name{
				padding-left: 14rpx;
			}
		}
		.application_rt{
			display: flex;
			flex-direction: column;
			justify-content: center;
			image{
				width: 140rpx;
				height: 40rpx;
			}
		}
		text{
			font-size: 32rpx;
		}
		.status{
			padding-left: 20rpx;
		}
	}
	.application_mid{
		margin-top: 4rpx;
		.cell{
			padding-top: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.cell_rt{
				color: #676767;
			}
			.check{
				color: #1A66FF;
				text{
					margin-top: 4rpx;
				}
			}
		}
		.org_title{
			font-size: 32rpx;
			// border-top: 2rpx dashed #dbdbdb;
			border-bottom: 2rpx dashed #dbdbdb;
			// margin-top: 26rpx;
			padding-bottom: 20rpx;
		}
	}
	.application_reason{
		// width: 100%;
		margin: 0 24rpx;
		padding: 24rpx;
		background: #fff;
	}
	.application_no{
		margin: 24rpx 24rpx 0;
		padding: 24rpx;
		background: #fff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		.cell_rt{
			color: #8E8E93;
		}
	}
	.title{
		font-size: 32rpx;
	}
	.textreason{
		text-indent: 2em;
		color: #8E8E93;
	}
	.application_pic{
		margin: 24rpx 24rpx 0 24rpx;
		padding: 24rpx;
		background: #fff;
		.img_list{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			image{
				margin-top: 20rpx;
				margin-right: 10rpx;
				width: 162rpx;
				height: 162rpx;
			}
		}
	}
	.footer{
		position: fixed;
		bottom: 10rpx;
		width: 100%;
		z-index: 1000;
		.btn{
			background: #1A66FF;
		}
	}
</style>
